<template>
    <div>
        <div ref="warp" class="container"></div>
    </div>
</template>

<script>
import { posSale } from '@/api/pos.js';

import echarts from 'echarts';

export default {
    data() {
        return {
            dataService: [],
            dataGoods: []
        };
    },
    mounted() {
        this.showChart();
    },
    methods: {
        showChart() {
            let myChart = echarts.init(this.$refs.warp);

            posSale().then(res => {
                this.dataService = res.dataService;
                this.dataGoods = res.dataGoods;
                myChart.setOption(this.posOptions, true);
            });
        }
    },
    computed: {
        posOptions() {
            var posList = [
                'left',
                'right',
                'top',
                'bottom',
                'inside',
                'insideTop',
                'insideLeft',
                'insideRight',
                'insideBottom',
                'insideTopLeft',
                'insideTopRight',
                'insideBottomLeft',
                'insideBottomRight'
            ];

            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: echarts.util.reduce(
                        posList,
                        function(map, pos) {
                            map[pos] = pos;
                            return map;
                        },
                        {}
                    )
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };

            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function() {
                    var labelOption = {
                        normal: {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                        }
                    };
                    myChart.setOption({
                        series: [
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            }
                        ]
                    });
                }
            };

            var labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            };
            return {
                color: ['#003366', '#006699', '#4cabce', '#e5323e'],

                title: {
                    text: '门店销量统计'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['门店服务', '商品售出']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    data: ['2012', '2013', '2014', '2015', '2016']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '门店服务',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        data: this.dataService
                    },
                    {
                        name: '商品售出',
                        type: 'bar',
                        label: labelOption,
                        data: this.dataGoods
                    }
                ]
            };
        }
    }
};
</script>

<style>
.container {
    width: 1000px;
    height: 500px;
    margin: auto;
}
</style>